<script setup lang="ts" name="userComment">
// userComment
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import 'highlight.js/styles/atom-one-dark.css'
import {nextTick, onMounted, ref} from "vue";
import {comment_list, comment_find, meArticleEdit, meArticleDelete} from "@/api/user"
import {usePage} from "@/plugins/pagination";
import {Modal, Message} from "view-ui-plus";
import Editor from "@/components/Editor.vue"
import hljs from "highlight.js";


let pagination = usePage();
let loading = ref(false);
let loading_model = ref(false);
let loading_submit = ref(false);
let showModal = ref(false);
let columns = ref([
  {
    title: '文章标题',
    key: 'title',
  },
  {
    title: '评论人',
    key: 'name',
  },
  {
    title: '评论内容',
    slot: 'content',
  },
  {
    title: 'IP',
    key: 'ip',
  },
  {
    title: '创建时间',
    key: 'create_time',
  },
  {
    title: '操作',
    slot: 'action',
    width: 160,
    fixed: 'right',
    align: 'center'
  }
]);
let data = ref([]);
let formElement = ref();
let formValidate = ref<any>({
  title: '',
  intro: '',
});
let ruleValidate = ref({
  title: [
    {required: true, message: '请输入标题', trigger: 'change'}
  ],
});

const show = (id: any) => {
  // 查看 && 编辑
  showModal.value = true;
  loading_model.value = true;
  comment_find(id).then((result) => {
    console.log(result)
    formValidate.value = {
      ...result.data
    };
    loading_model.value = false;
    nextTick(() => {
      highlightCode()
    })
  })
}

const remove = async (id: any) => {
  // 删除文章
  Modal.confirm({
    title: '警告',
    content: '<p>确认要删除该评论吗？</p>',
    loading: true,
    onOk: () => {
      Modal.remove();
      // meArticleDelete(id).then((result: any) => {
      //   if (result.code == 200) {
      //     Message.success(result.data);
      //     getList();
      //   } else {
      //     Message.error(result.data)
      //   }
      //   Modal.remove();
      // })
    }
  });
}

const highlightCode = () => {
  const pre = document.querySelectorAll('pre.ql-syntax');
  //选择所有pre标签并且class为ql-syntax的元素
  pre.forEach((el: any) => {
    hljs.highlightBlock(el);
    // hljs.highlightElement(el);
    //渲染全部指定的标签
  })
}
const onOk = () => {
  // 保存
  formElement.value?.validate((valid) => {
    if (valid) {
      loading_submit.value = true;
      setTimeout(() => {
        meArticleEdit(formValidate.value).then((result: any) => {
          console.log(result)
          loading_submit.value = false;
          if (result.code == 200) {
            Message.success(result.data)
            showModal.value = false;
            getList();
          } else {
            Message.error(result.data)
          }
        }).catch((result: any) => {
          loading_submit.value = false;
        })
      }, 500)
    } else {
      console.log("error")
    }
  })
}
const onCancel = () => {
  // 关闭弹窗触发
  console.log('关闭弹窗')
  formValidate.value = {};
}

const getList = () => {
  // 获取我发布的文章列
  loading.value = true;
  comment_list(pagination).then((result: any) => {
    console.log(result)
    data.value = result.data.data;
    pagination.total = result.data.total;
    loading.value = false;
  })
}

const stripHtmlTags = (str: string) => {
  return str.replace(/<[^>]*>/g, '');
}

onMounted(() => {
  getList();
})
</script>
<!--<script>-->
<!--export default {-->
<!--  name: 'userArticle'-->
<!--}-->
<!--</script>-->

<template>
  <div>
    <Table border :columns="columns" :data="data" :loading="loading">
      <template #action="{ row, index }">
        <Space :size="10">
          <a type="primary" size="small" @click="show(row.id)">查看</a>
          <a type="error" size="small" @click="remove(row.id)">删除</a>
        </Space>
      </template>
      <template #top="{ row, index }">
        <Poptip v-if="new Date(row.is_top).getTime() > Date.now()" transfer trigger="hover" title="置顶结束时间"
                :content="row.is_top">
          <Tag color="#ea3323">置顶中</Tag>
        </Poptip>
        <Tag v-else>无</Tag>
      </template>
      <template #content="{ row, index }">
        <div v-line-clamp="2">{{ stripHtmlTags(row.content) }}</div>
      </template>
      <template #status="{ row, index }">
        <Tag v-if="row.status == 0" color="warning">审核中</Tag>
        <Tag v-if="row.status == 1" color="success">正常</Tag>
        <Tag v-if="row.status == 2" color="error">审核失败</Tag>
      </template>
    </Table>
    <Page style="margin-top: 10px;" :modelValue="pagination.pageNo" :total="pagination.total"
          @on-change="(e) => {pagination.pageNo = e;getList()}"
          show-total show-elevator/>
    <Modal
        loading
        width="60%"
        v-model="showModal"
        title="查看"
        @on-cancel="onCancel"
    >
      <div :class="{pointerNone:formValidate.readonly || loading_submit}">
        <Spin v-if="loading_model"></Spin>
        <Form v-else ref="formElement" :model="formValidate" :rules="ruleValidate" :label-width="80">
          <FormItem label="标题" prop="name">
            <Input v-model="formValidate.title" readonly placeholder="标题"></Input>
          </FormItem>
          <FormItem label="评论人" prop="name">
            <Input v-model="formValidate.name" readonly placeholder="评论人"></Input>
          </FormItem>
          <FormItem label="正文" prop="content">
            <div class="editor ql-container ql-snow">
              <div class="detailText ql-editor" v-html="formValidate.content"/>
            </div>
          </FormItem>
        </Form>
      </div>
      <template #footer>
        <Space :size="20">
          <a @click="showModal=false">关闭</a>
        </Space>
      </template>
    </Modal>
  </div>
</template>

<style scoped lang="scss">
.pointerNone {
  pointer-events: none;
}
</style>
